<template>
  <div class="schoolMemoryDetail">
    <div class="header">
      <div>
        <u-avatar
          size="36"
          src="https://cdn.uviewui.com/uview/album/1.jpg"
        ></u-avatar>
      </div>
      <div style="margin-left: 10px">
        <div style="font-size: 18px">都高人</div>
        <div style="font-size: 14px">2022-09-19 10:30:27</div>
      </div>
    </div>
    <div class="content">
      <div style="font-size: 20px;padding: 15px 0px;text-indent: 10px;}">
        欢迎分享你珍藏的都高记忆
      </div>
      <div class="Imgs">
        <!-- <div class="left">

          <div>
            <image
              class="image"
              src="../../static/index/xiaoqing_bj.png"
            ></image>
          </div>
          <div>
            <image class="image" src="../../static/index/index_bj.png"></image>
          </div>
          <div>
            <image class="image" src="../../static/index/card_1.png"></image>
          </div>
          <div>
            <image class="image" src="../../static/index/card_2.png"></image>
          </div>
          <div>
            <image
              class="image"
              src="../../static/index/xiaoqing_img3.png"
            ></image>
          </div>
        </div>
        <div class="right">
          <div>
            <image
              class="image"
              src="../../static/index/xiaoqing_img3.png"
            ></image>
          </div>
          <div>
            <image
              class="image"
              src="../../static/index/xiaoqing_img2.png"
            ></image>
          </div>
          <div>
            <image
              class="image"
              src="../../static/index/personal_1.png"
            ></image>
          </div>
          <div>
            <image
              class="image"
              src="../../static/index/personal_2.png"
            ></image>
          </div>
          <div>
            <image
              class="image"
              src="../../static/index/personal_3.png"
            ></image>
          </div>
        </div> -->
        <div class="img" v-for="item in imgData" :key="item.id">
          <u--image :showLoading="true" width="100%" :src="item.src"></u--image>
          <div class="dianzan">
            <u-icon
              :name="aixin"
              :label="item.num"
              color="white"
              labelColor="#fff"
            ></u-icon>
          </div>
        </div>
      </div>
    </div>
    <!-- 按钮 -->
    <div
      class="btn_box"
      style="
        padding: 10px 10px;
        box-sizing: border-box;
        background: white;
        width: 100%;
        position: fixed;
        bottom: 0px;
        left: 0;
      "
    >
      <button
        class="btn"
        style="background: #1990ff; color: white; border-radius: 10px"
      >
        上传照片
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aixin: require("@/static/index/shiyi_aixin.png"),
      imgData: [
        {
          id: 1,
          num: 25,
          flag: false,
          src: require("@/static/index/card_1.png"),
        },
        {
          id: 2,
          num: 25,
          flag: false,
          src: require("@/static/index/1.webp"),
        },
        {
          id: 3,
          num: 25,
          flag: false,
          src: require("@/static/index/2.webp"),
        },
        {
          id: 4,
          num: 25,
          flag: false,
          src: require("@/static/index/card_1.png"),
        },
        {
          id: 5,
          num: 25,
          flag: false,
          src: require("@/static/index/login_bj.png"),
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss">
.schoolMemoryDetail {
  .header {
    display: flex;
    background-color: #fff;
    padding: 15px;
  }

  .content {
    background: white;
    margin-top: 5px;

    .Imgs {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 70px;
      .img {
        width: 50%;
        padding: 2px;
        position: relative;
        .dianzan {
          position: absolute;
          right: 10px;
          bottom: 10px;
        }
      }

      .left {
        width: 50%;

        // background-image: url('@/static/1.webp');
        .image {
          width: 100%;
          // height: 100%;
          object-fit: scale-down;
          // width: auto;
          // height: auto;
          // object-fit: contain;
          // height: 100%;
        }
      }

      .right {
        width: 50%;
        // height: 100px;

        .image {
          // object-fit: scale-down;
          width: 100%;
          // height: auto;
          // height: auto;
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
  }
}
</style>
